<template>
	<view class="comment-list">
		<scroll-view scroll-y="true" class="scroll-comment" :class="{'no-scroll-comment': !scroll}"
			@scrolltolower="scrolltolower" @scroll="commentScroll" :scroll-top="scrollTop">
			<view class="comment-item" v-for="(item,index) in postList" :key="item.commentId">
				<image :src="item.userAvatar" class="from-avatar-url" mode="aspectFill"></image>
				<view class="comment-info">
					<view style="width: 100%;" @longpress.stop.prevent="longpressHandler(item,index)">
						<!-- hover-class="longpressHandler" -->
						<view class="comment-header">
							<view class="comment-name">
								<text class="onelist-hidden">{{item.userName}}</text>
								<text class="writer" v-if="commentInfo.userId == item.userId">作者</text>
							</view>
							<view @tap.stop.prevent="onZan(item,index)" class="comment-zan-no"
								:class="{'comment-zan':item.commentLikeState}">{{item.likeNum | likeNum}}</view>
						</view>
						<view @tap.stop.prevent="onReply(item,index,1)" class="comment-content-box">
							<text
								v-if="item.comment.indexOf('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/')">{{item.comment}}</text>
							<image v-else style="width: 90rpx; height: 90rpx;" :src="item.comment" mode="aspectFill">
							</image>
						</view>
						<view @tap.stop.prevent="onReply(item,index,1)" class="comment-reply">
							<text class="comment-data">{{item.createTime | timeFormats}}</text>回复
						</view>
					</view>
					<template v-if="item.clientForumCommentPage.list.length > 0">
						<view class="comment-item comment-item-child"
							v-for="(li,inli) in item.clientForumCommentPage.list" :key="li.commentId">
							<image :src="li.userAvatar" class="from-avatar-url" mode="aspectFill"></image>
							<view class="comment-info">
								<view style="width: 100%;"
									@longpress.stop.prevent="longpressHandler(li,inli,index,'child')">
									<view class="comment-header">
										<view class="comment-name">
											<text class="onelist-hidden">{{li.userName}}</text>
											<text class="writer" v-if="commentInfo.userId == li.userId">作者</text>
										</view>
										<view @tap.stop.prevent="onZan(li,inli,index,'child')" class="comment-zan-no"
											:class="{'comment-zan':li.commentLikeState}">{{li.likeNum | likeNum}}</view>
									</view>
									<view @tap.stop.prevent="onReply(li,index,2,inli)" class="comment-content-box">
										<view class="" v-if="li.repliedUserId">
											<text style="margin-right: 10rpx; vertical-align: middle;">回复</text>
											<text
												style="color: #999B9B; max-width: 50%; display: inline-block; vertical-align: middle;"
												class="onelist-hidden">{{li.repliedUserName}}</text>
											<text style="vertical-align: middle;">: {{li.comment}}</text>
										</view>
										<text v-else>{{li.comment}}</text>
									</view>
									<view @tap.stop.prevent="onReply(li,index,2,inli)" class="comment-reply">
										<text class="comment-data">{{li.createTime | timeFormats}}</text>回复
									</view>
								</view>
							</view>
						</view>
					</template>
					<!-- v-if="item.commentNum > 0 && item.clientForumCommentPage.hasMore" -->
					<view class="comment-fun">
						<view class="more" @tap.stop.prevent="getMore(item,index)"
							v-if="item.commentNum > 0 && item.clientForumCommentPage.hasMore">
							<view class="expand-more">展开更多</view>
							<view class="dy-iconfont icon-qiehuanqiyou" style="color: #999B9B; font-size: 24rpx;">
							</view>
						</view>
						<view class="more pack-up" @tap.stop.prevent="packUp(item,index)"
							v-if="item.clientForumCommentPage.list.length > 1">
							<view class="expand-more">收起</view>
							<view class="dy-iconfont icon-qiehuanqiyou" style="color: #999B9B; font-size: 24rpx;">
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-show="list.length <= 0">
				<empty :padding="padding"></empty>
			</view>
			<view v-show="commentLoad.loading && false">
				<uv-load-more :status="commentLoad.status" :loading-text="commentLoad.loadingText"
					:nomore-text="commentLoad.nomoreText" :line="commentLoad.status == 'nomore'" />
			</view>
		</scroll-view>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>
<script>
	import {
		timeFormat,
		timeFrom
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	const app = getApp();
	export default {
		props: {
			scroll: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			padding: {
				type: String,
				default: '100rpx 0'
			},
			commentLoad: {
				type: Object,
				default: () => {
					return {}
				}
			},
			commentInfo: {
				type: Object,
				default: () => {
					return {}
				}
			},
		},
		data() {
			return {
				lineHeight: 24,
				emojiSource: 'https://img.scrm.so/emoji-sprite.b5bd1fe0.png',
				commentChildList: {
					list: [],
					hasMore: false,
					loading: false,
					page: 1,
					index: 0
				},
				commentChildLoad: {
					loading: false,
					status: 'loading',
					loadingText: '努力加载中',
					nomoreText: '没有更多了'
				},
				scrollTop: 0,
				oldScrollTop: 0,
				postList: [],
				longpressInfo: null,
				replyInfo: null,
			}
		},
		watch: {
			list: {
				handler: function(newVal) {
					this.setData({
						postList: newVal,
					});
				},
				immediate: true,
				deep: true,
			},
		},
		filters: {
			timeFormats: function(value) {
				if (value == 0 || !value) {
					return ''
				} else {
					let time = value.replaceAll('-', '/');
					return timeFrom(new Date(time).getTime(), false)
				}
			},
			likeNum(value) {
				if (value > 10000) {
					return (value / 10000).toFixed(2);
				} else if (value < 0) {
					return 0
				} else {
					return value
				}
			}
		},

		methods: {
			// 表情
			appendMessage(e) {
				this.inputText = this.inputText + e.detail.message
			},
			onReply(item, index, type, inli) {
				let reply = {
					item: Object.assign(item, {
						type: 'comment'
					})
				}
				reply.index = index
				if (type == 2) {
					reply.inli = inli
				}
				this.replyInfo = reply
				this.$emit('onInfo', reply)
			},
			onReplyChild(data) {
				this.postList[this.replyInfo.index].commentNum = Number(this.postList[this.replyInfo.index].commentNum) + 1
				this.postList[this.replyInfo.index].clientForumCommentPage.list.unshift(data)
			},
			scrolltolower() {
				this.$emit('scrolltolower')
			},
			commentScroll(e) {
				//记录scroll  位置
				this.oldScrollTop = e.detail.scrollTop
			},
			goTop(e) {
				//视图会发生重新渲染
				this.scrollTop = this.oldScrollTop
				//当视图渲染结束 重新设置为0
				this.$nextTick(() => {
					this.scrollTop = 0
				});
			},
			packUp(item) {
				item.clientForumCommentPage.list = []
				item.clientForumCommentPage.hasMore = true
				item.clientForumCommentPage.loading = false
				item.clientForumCommentPage.page = 1
				item.clientForumCommentPage.index = 0
			},
			getMore(item, index) {
				return new Promise((resolve, reject) => {
					item.clientForumCommentPage.loading = false
					app._post_form("/client/forum-comment/query-replay-page", {
							current: item.clientForumCommentPage.page,
							extra: {},
							model: {
								commentId: item.commentId,
							},
							order: "descending",
							size: 10,
							sort: "createTime"
						},
						(result) => {
							let {
								records,
								total
							} = result.data;
							let {
								page,
								list,
								hasMore
							} = item.clientForumCommentPage;
							if (1 == page) {
								list.length = 0;
							}
							// records.forEach(li => {
							// 	if (li.repliedUserId == item.userId) {
							// 		li.repliedtype = 1
							// 	} else {
							// 		li.repliedtype = 2
							// 	}
							// })

							list = [...list, ...records];
							hasMore = total > list.length;
							if (hasMore) {
								page++;
								this.commentChildLoad.loading = false
							} else if (list.length > 3) {
								this.commentChildLoad.loading = true
								this.commentChildLoad.status = 'nomore'
							} else {
								this.commentChildLoad.status = 'nomore'
							}
							item.clientForumCommentPage.hasMore = hasMore;
							item.clientForumCommentPage.list = list;
							item.clientForumCommentPage.page = page;
							item.clientForumCommentPage.index = index
							resolve();
						}, null, () => {
							reject();
						}
					);
				});
			},
			closeMore(index) {
				this.$emit('closeMore', index)
			},
			longpressHandler(item, index, fIndex, type) {
				let delete_status = false
				if (app.globalData.UserInfo) {
					delete_status = item.userId == app.globalData.UserInfo.authInfo.userId ? true : false
				}
				this.longpressInfo = {
					delete_status,
					item,
					index,
					fIndex,
					type
				}
				this.$emit('longpressHandler', this.longpressInfo)
			},
			deleteComment() {
				let that = this
				that.$refs.toast.show({
					type: 'loading',
				})
				let {
					delete_status,
					item,
					index,
					fIndex,
					type
				} = that.longpressInfo
				return new Promise((resolve, reject) => {
					app._post_form('/client/forum-comment/remove-comment', item.commentId,
						(result) => {
							if (type == 'child') {
								that.postList[fIndex].clientForumCommentPage.list.splice(index, 1)
							} else {
								that.postList.splice(index, 1)
							}
							this.$emit('removeResolve')
						}, null, (err) => {
							that.$refs.toast.hide()
						})
				})
			},
			onZan(post, index, fIndex, type) {
				// post.likeNum = post.commentLikeState == 1 ? Number(post.likeNum) - 1 :
				// 	Number(post.likeNum) + 1
				// post.commentLikeState = post.commentLikeState == 1 ? 0 : 1
				// this.$set(post, 'likeNum', post.commentLikeState == 1 ? Number(post.likeNum) - 1 : Number(post.likeNum) +
				// 	1)
				// this.$set(post, 'commentLikeState', post.commentLikeState == 1 ? 0 : 1)
				if (type == 'child') {
					console.log(this.postList[fIndex].clientForumCommentPage.list[index]);
					this.$set(this.postList[fIndex].clientForumCommentPage.list[index], 'likeNum', post.commentLikeState ==
						1 ? Number(post.likeNum) - 1 :
						Number(post.likeNum) + 1)
					this.$set(this.postList[fIndex].clientForumCommentPage.list[index], 'commentLikeState', post
						.commentLikeState == 1 ? 0 : 1)
				} else {
					this.$set(this.postList[index], 'likeNum', post.commentLikeState == 1 ? Number(post.likeNum) - 1 :
						Number(post.likeNum) + 1)
					this.$set(this.postList[index], 'commentLikeState', post.commentLikeState == 1 ? 0 : 1)
				}
				if (!app.globalData.isLogin) {
					return
				}
				return new Promise((resolve, reject) => {
					app._post_form('/client/forum-topic/give-like', {
						giveId: post.commentId,
						giveType: 1
					}, (result) => {
						resolve()
					}, null, (err) => {})
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.comment-list {
		// border: 1rpx solid rgba(100, 200, 120, 1);

		.scroll-comment {
			height: 650rpx;

			&.no-scroll-comment {
				height: auto;
			}
		}

		.comment-item {
			display: flex;
			margin-bottom: 48rpx;
			width: 100%;

			&.comment-item-child {
				margin-bottom: 0rpx;
				margin-top: 24rpx;

				.from-avatar-url {
					flex-shrink: 0;
					width: 48rpx;
					height: 48rpx;
				}
			}

			.comment-fun {
				display: flex;
				align-items: center;

				.pack-up {
					box-sizing: border-box;
					padding-top: 24rpx;

					.icon-qiehuanqiyou {
						transform: rotate(-90deg);
						margin-left: 8rpx;
						font-size: 22rpx;
						color: #999B9B;
					}
				}
			}

			.more {
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding-top: 24rpx;
				padding-right: 80rpx;

				.expand-more {
					font-size: 24rpx;
					font-weight: 400;
					color: #999B9B;
					line-height: 33rpx;
				}

				.icon-qiehuanqiyou {
					transform: rotate(90deg);
					margin-left: 8rpx;
					font-size: 22rpx;
					color: #999B9B;
				}
			}

			.me {
				font-size: 20rpx;
				margin-left: 6rpx;
				color: #9da4bc;
				padding: 2rpx 18rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
				background-color: #e9ebf4;
			}

			.from-avatar-url {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 12rpx;
				flex-shrink: 0;
			}
		}

		.comment-info {
			width: calc(100% - 48rpx - 12rpx);
			// flex: 1;

			.comment-header {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.comment-name {
					font-size: 28rpx;
					font-weight: 400;
					color: #999B9B;
					line-height: 40rpx;
					display: flex;
					align-items: center;
					max-width: 80%;

					.writer {
						width: 56rpx;
						height: 30rpx;
						background: #0E0E0D;
						border-radius: 18rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 30rpx;
						text-align: center;
						margin-left: 16rpx;
						flex-shrink: 0;
					}

					.name {
						max-width: 40%;
					}

					.icon-arrow {
						font-size: 20rpx;
						color: #999B9B;
						margin-left: 10rpx;
					}
				}

				.comment-zan-no {
					font-size: 26rpx;
					font-weight: 400;
					color: #282D2D;
					line-height: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					filter: grayscale(100%);
					-webkit-filter: grayscale(100%);

					&::before {
						font-family: "dy-iconfont";
						content: "\e635";
						font-size: 30rpx;
						padding-right: 8rpx;
						box-sizing: border-box;
						flex-shrink: 0;
					}


					&.comment-zan {
						filter: grayscale(0%);
						-webkit-filter: grayscale(0%);

						&::before {
							content: "";
							display: inline-block;
							box-sizing: border-box;
							width: 30rpx;
							height: 30rpx;
							background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/community/zan/zan.png');
							background-size: 100% 100%;
							margin-right: 8rpx;
							flex-shrink: 0;
						}
					}
				}
			}

			.comment-content-box {
				font-size: 28rpx;
				font-weight: 400;
				color: #282D2D;
				line-height: 40rpx;
				margin-bottom: 8rpx;
			}

			.comment-reply {
				font-size: 24rpx;
				font-weight: 400;
				color: #999B9B;
				line-height: 33rpx;

				.comment-data {
					margin-right: 32rpx;
				}
			}
		}
	}

	.longpressHandler {
		animation: blur-out-expand .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	}

	@keyframes blur-out-expand {
		0% {
			background: rgba(255, 0, 0, 1);
		}

		100% {
			background: rgba(255, 0, 0, 0);
		}
	}
</style>